﻿

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>

    </title>
    <link href="//res.layui.com/layui/build/css/layui.css" rel="stylesheet" />
    <script src="http://res.layui.com/layui/build/layui.js"></script>

</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header header header-demo">
            <div class="layui-main">
                <a class="logo" href="/">
                    <img src="//res.layui.com/images/layui/logo-1.png" alt="layui">
                </a>

            </div>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">

                <ul class="layui-nav layui-nav-tree site-demo-nav">

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">开发工具</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="/demo/">调试预览</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">基本元素</a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="/demo/button.html">按钮</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/form.html">表单</a>
                            </dd>
                            <dd class="layui-this">
                                <a href="/demo/nav.html">导航</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/table.html">表格</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/tab.html">选项卡</a>
                            </dd>
                            <dd class="">
                                <a href="/demo/auxiliar.html">辅助元素</a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="javascript:;" href="javascript:;">官方组件</a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="/demo/layer.html">
                                    <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/layim.html">
                                    <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
                                    <cite>即时通讯</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laydate.html">
                                    <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laypage.html">
                                    <i class="layui-icon">&#xe633;</i><cite>多功能分页</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/laytpl.html">
                                    <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/layedit.html">
                                    <i class="layui-icon">&#xe639;</i>
                                    <cite>富文本编辑器</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/upload.html">
                                    <i class="layui-icon">&#xe62f;</i>
                                    <cite>文件上传</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/tree.html">
                                    <i class="layui-icon">&#xe62e;</i>
                                    <cite>树形菜单</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/util.html">
                                    <i class="layui-icon">&#xe631;</i>
                                    <cite>工具块</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/flow.html">
                                    <i class="layui-icon">&#xe636;</i>
                                    <cite>流加载</cite>
                                </a>
                            </dd>
                            <dd class="">
                                <a href="/demo/code.html">
                                    <i class="layui-icon" style="top: 1px;">&#xe635;</i>
                                    <cite>代码修饰器</cite>
                                </a>
                            </dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
                </ul>

            </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
            <ul class="layui-tab-title site-demo-title">
                <li class="layui-this">预览</li>
                <li>查看代码</li>
                <li>帮助</li>
            </ul>
            <div class="layui-body layui-tab-content site-demo site-demo-body">


                <div class="layui-tab-item layui-show">
                    <div class="layui-main">
                        <div id="LAY_preview">

                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>水平导航菜单</legend>
                            </fieldset>

                            <ul class="layui-nav">
                                <li class="layui-nav-item"><a href="">最新活动</a></li>
                                <li class="layui-nav-item layui-this">
                                    <a href="">产品</a>
                                    <dl class="layui-nav-child">
                                        <dd><a href="">选项1</a></dd>
                                        <dd><a href="">选项2</a></dd>
                                        <dd><a href="">选项3</a></dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item"><a href="">大数据</a></li>
                                <li class="layui-nav-item">
                                    <a href="javascript:;">解决方案</a>
                                    <dl class="layui-nav-child">
                                        <dd><a href="">移动模块</a></dd>
                                        <dd><a href="">后台模版</a></dd>
                                        <dd class="layui-this"><a href="">选中项</a></dd>
                                        <dd><a href="">电商平台</a></dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item"><a href="">社区</a></li>
                            </ul>

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>垂直导航菜单</legend>
                            </fieldset>

                            <ul class="layui-nav layui-nav-tree" lay-filter="demo">
                                <li class="layui-nav-item layui-nav-itemed">
                                    <a href="javascript:;">默认展开</a>
                                    <dl class="layui-nav-child">
                                        <dd><a href="javascript:;">选项一</a></dd>
                                        <dd><a href="javascript:;">选项二</a></dd>
                                        <dd><a href="javascript:;">选项三</a></dd>
                                        <dd><a href="">跳转项</a></dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item">
                                    <a href="javascript:;">解决方案</a>
                                    <dl class="layui-nav-child">
                                        <dd><a href="">移动模块</a></dd>
                                        <dd><a href="">后台模版</a></dd>
                                        <dd><a href="">电商平台</a></dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item"><a href="">云市场</a></li>
                                <li class="layui-nav-item"><a href="">社区</a></li>
                            </ul>

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>侧边固定导航菜单</legend>
                            </fieldset>

                            ← 囖，就左边那家伙！ 带图标神马的那是必须可以的。另外你可能还需要下拉菜单，这个将在下版本推出！

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>默认面包屑</legend>
                            </fieldset>

                            <span class="layui-breadcrumb">
                                <a href="/">首页</a>
                                <a href="/demo/">演示</a>
                                <a><cite>导航元素</cite></a>
                            </span>

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>自定义分隔符的面包屑</legend>
                            </fieldset>

                            <span class="layui-breadcrumb" lay-separator="—">
                                <a href="">首页</a>
                                <a href="">国际新闻</a>
                                <a href="">亚太地区</a>
                                <a><cite>正文</cite></a>
                            </span>

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>还可以用于门户频道的面包屑</legend>
                            </fieldset>

                            <span class="layui-breadcrumb" lay-separator="|">
                                <a href="">娱乐</a>
                                <a href="">八卦</a>
                                <a href="">体育</a>
                                <a href="">搞笑</a>
                                <a href="">视频</a>
                                <a href="">游戏</a>
                                <a href="">综艺</a>
                            </span>

                            <p class="layui-elem-quote">其实就是自定义了个“|”的分隔符，然后最后一项也可以点。</p>
                        </div>
                        <div class="layui-elem-quote" style="margin-top: 20px;">
                            <p>Layui - 精心为你雕琢</p>
                        </div>
                    </div>
                </div>


                <div class="layui-tab-item">
                    <textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
                        <!doctype html>
                        <html>
                        <head>
                            <meta charset="utf-8">
                            <title>layui</title>
                            <meta name="renderer" content="webkit">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                            <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
                        </head>
                </textarea>
            </div>


            <div class="layui-tab-item">
                <div class="layui-main">

                    <div style="margin: 15px 0;">
                        <ins class="adsbygoogle"
                             style="display: inline-block; width: 970px; height: 90px"
                             data-ad-client="ca-pub-6111334333458862"
                             data-ad-slot="6835627838"></ins>
                    </div>


                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>相关</legend>
                    </fieldset>
                    <a class="layui-btn layui-btn-normal" href="/doc/element/nav.html" target="_blank">导航元素文档</a>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-footer footer footer-demo">
        <div class="layui-main">
            <p>2016 &copy; <a href="/">layui.com</a> MIT license</p>
            <p>
                <a href="http://fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
                <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
                <a href="mailto:xianxin@layui.com">广告联系</a>
                <a href="https://github.com/sentsin/layui/" target="_blank">Git仓库</a>
                <a href="http://fly.layui.com/jie/2461.html" target="_blank">微信公众号</a>
            </p>
        </div>
    </div>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>
    <script src="//res.layui.com/layui/build/layui.js?t=1481073704865" charset="utf-8"></script>
    <script>
            layui.config({
                base: '//res.layui.com/lay/modules/layui/'
              , version: '1481073704865'
            }).use('global');

            window.global = {
                preview: function () {
                    var preview = document.getElementById('LAY_preview');
                    return preview ? preview.innerHTML : '';
                }()
            };
    </script>
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
<div id="LAY_democodejs">
    <script>
            layui.use('element', function () {
                var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块

                //监听导航点击
                element.on('nav(demo)', function (elem) {
                    //console.log(elem)
                    layer.msg(elem.text());
                });
            });
    </script>
</div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"9df785792a104f5bb187bb5449ec0b45"}
</script>
<script type="text/javascript" src="http://localhost:2294/bc65caa3decb44a3829eb8a4c5d9ed2a/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
